<template>
<el-header>
<div class="el-header-box">
    <div class="topmenu-1">
        <el-image
        class="weblogo"
        :src="require('@/assets/img/logo.png')"></el-image>
        <span class="jidi-box">
            <el-dropdown trigger="click" @command="handleThebase">
            <span class="el-dropdown-link" style="color:#fff;font-size:16px;">
                <i class="el-icon-map-location" style="font-size:16px;color:#D5D77D;"></i> {{thebaseName}}<i class="el-icon-arrow-down el-icon--right" style="font-size:10px;color:#D5D77D;"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-finished" command="1">南海基地</el-dropdown-item>
                <el-dropdown-item icon="el-icon-finished" command="2">三水基地</el-dropdown-item>
                <el-dropdown-item icon="el-icon-finished" command="3">山东基地</el-dropdown-item>
            </el-dropdown-menu>
            </el-dropdown>
        </span>
    </div>
    <div class="topmenu-2">
        <el-aside width="960px">
            <SideMenu></SideMenu>
        </el-aside>
    </div>
    <div class="topmenu-3">
        <div class="header-avatar">
            <div class="top-menu-right-box">
            <span class="lanmu-btn" @click="gotoNavUrl('/message/EventRecordList')"><i class="el-icon-message-solid"></i> 消息</span>|
            <span class="lanmu-btn" @click="gotoNavUrl('/sys/userInfo')"><i class="el-icon-s-tools"></i> 系统</span>|
            <el-avatar :src="require('@/assets/img/v2_r9yr1s.png')" :size="25" class="avatar-box"></el-avatar>
            <el-dropdown @command="handleSysInfo">
                <span class="el-dropdown-link">
                超级管理员<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="usercenter">个人中心</el-dropdown-item>
                <el-dropdown-item command="changepass">修改密码</el-dropdown-item>
                <el-dropdown-item command="logout">退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            </div>
        </div>
    </div>
    <div v-loading.fullscreen.lock="fullscreenLoading"></div>
  </div>
</el-header>
</template>

<script>
import { userLogout } from "@/api/sendhttp/login";
import SideMenu from "@/views/inc/SideMenu";
export default {
  name: "SideHeader",
  components: {SideMenu,},
   data() {
    return {
      thebaseName:'南海基地',
      fullscreenLoading:false,
    };
  },
  methods: {
     gotoNavUrl(urls){
        this.$router.push({ path: urls })
     },
     handleThebase(ids) {
        var that=this;
        if(ids==1){this.thebaseName="南海基地";}
        if(ids==2){
            this.$message('其他相关基地开发开放中');
          return false;
          this.thebaseName="三水基地";
        }
        if(ids==3){
          this.$message('其他相关基地开发开放中');
          return false;
          this.thebaseName="山东基地";
        }
        
        this.fullscreenLoading = true;
        setTimeout(() => {
          this.fullscreenLoading = false;
        },500);

      },
      handleSysInfo(command) {
        //this.$message('click on item ' + command);
        if(command=="logout"){
           this.$confirm('确定退出系统平台?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              userLogout
              userLogout({}).then(res => {
                this.$store.dispatch('LogOut').then(() => {
                    // 跳转到首页
                    location.href = '/home';
                })
              });
            }).catch(() => {
              console.log('退出登录');       
            });
        }
		if(command=="usercenter"){
			location.href = '/sys/userInfo';
		}
		if(command=="changepass"){
			location.href = '/sys/changepass';
		}
      },
  }
}
</script>
<style>
.el-header-box{
  background-color: #0658A2;
  color: #333;
  text-align: center;
  line-height: 60px;
  padding:0;
  height:60px;
}
.el-header-box .is-active{
  background-color:#0BB976!important;
  border-bottom-color:#0BB976!important;
  color:#FFFFFF;
}
.el-header-box .is-active .el-submenu__title{
  background-color:#0BB976!important;
  border-bottom-color:#0BB976!important;
  color:#FFFFFF;
}
.el-header-box .is-active .el-submenu__icon-arrow{
  color: #FFFFFF!important;
}
.el-menu.el-menu--horizontal{
  border-bottom:none!important;
}
</style>
<style scoped>
.weblogo{
  width:173px;
  height:50px;
  margin-top:5px;
  margin-left:8px;
  border-radius:2px;
}
.jidi-box{
  margin:0px 15px 15px 5px;
  padding-bottom:15px;
  color:#FDF9F9;
  font-size:18px;
  position: relative;
  top:-16px;
}
.topmenu-1{
  float:left;
  width:350px;
  text-align:left;
}
.topmenu-2{
  float:left;
  margin-left:30px;
}
.topmenu-3{
  float:right;
}
.el-menu-top{
  background: transparent;
  font-size:18px;
}
.header-avatar {
  float: right;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding:0px 15px 0px 15px;
}
.top-menu-right-box{
  color: #919191;
  line-height: 60px;
}
.lanmu-btn{
  margin-left:10px;
  margin-right:10px;
  font-size:14px;
  cursor: pointer;
}
.avatar-box{
  margin-left:10px;
  margin-right:10px;
  vertical-align: middle;
}
.el-dropdown-link {
  cursor: pointer;
  color: #919191;
  font-size:14px;
}
.el-dropdown-menu{
  top: 48px !important;;
}
</style>
